<%@ page import="xyz.vmcserver.wdibbs.model.po.UserView" %>
<%@ page import="xyz.vmcserver.wdibbs.model.vo.User" %><%--
  Created by IntelliJ IDEA.
  User: 11382
  Date: 2022/5/31
  Time: 21:06
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
    User userS;
    if(null!=session.getAttribute("isLoginUser")){
        userS = (User)session.getAttribute("isLoginUser");
    }else{
        userS = new User();
    }
%>
<html>
<head>
    <link href="/static/css/userHome.css" rel="stylesheet">
</head>
<body>
<jsp:include page="/WEB-INF/pages/module/head.jsp">
    <jsp:param name="title_2" value="用户主页"/>
</jsp:include>
<%--导入导航栏--%>
<jsp:include page="/WEB-INF/pages/module/navbar.jsp">
    <jsp:param name="permission" value="1"/>
</jsp:include>
<div class="container">
    <div class="row">
        <div class="col-2 b1"></div>
        <div class="col-8 b2">
            <ul class="list-group">
                <c:if test="${!empty userInfoAll}">
                    <li class="list-group-item active" aria-current="true">|&nbsp;用户信息</li>
                    <li class="list-group-item line-face">
                        <c:if test="${userInfoAll.username eq sessionScope.isLoginUser.username}" var="sc1" scope="page">
                            <img width="100x" height=100px id="face" src="/userHeader/<c:out value="${userInfoAll.header_url}" default="default.jpg"/>" class="rounded-circle">
                            <div class="faceTips-l1">
                                <div class="faceTips-l2">
                                    添加照片，个性化你的账户。 你的个人资料照片会显示在论坛的主页和nav栏，让大家更好的认识你。<br>
                                    <button class="btn btn-outline-secondary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">变更头像</button>
                                </div>
                            </div>
                        </c:if>
                        <c:if test="${userInfoAll.username ne sessionScope.isLoginUser.username}" var="sc1" scope="page">
                            <div style="text-align: center">
                                <img width="100x" height=100px id="face" src="/userHeader/<c:out value="${userInfoAll.header_url}" default="default.jpg"/>" class="rounded-circle">
                            </div>

                        </c:if>

                    </li>
                    <%--                <c: item="${userInfoAll}" var="uia">--%>
                    <li class="list-group-item" style="padding-left:50px;padding-right:50px;">
                        <div style="display:inline-block;width: 300px;">
                            用户名：
                        </div>
                        <div style="display:inline-block;">
                            <c:out value="${userInfoAll.username}"/>
                        </div>
                    </li>
                    <li class="list-group-item" style="padding-left:50px;padding-right:50px;">
                        <div style="display:inline-block;width: 300px;">
                            昵称：
                        </div>
                        <div style="display:inline-block;">
                            <c:out value="${userInfoAll.alias}"/>
                        </div>
                        <c:if test="${userInfoAll.username eq sessionScope.isLoginUser.username}" var="sc1" scope="page">
                            <div style="float: right;">
                                <a href="" style="color: rgba(0, 217, 255, 0.776);text-decoration: none;">编辑</a>
                            </div>
                        </c:if>
                    </li>
                    <li class="list-group-item" style="padding-left:50px;padding-right:50px;">
                        <div style="display:inline-block;width: 300px;">
                            电子邮件：
                        </div>
                        <div style="display:inline-block;">
                            <c:out value="${userInfoAll.email}"/>
                        </div>
                        <c:if test="${userInfoAll.username eq sessionScope.isLoginUser.username}" var="sc1" scope="page">
                            <div style="float: right;">
                                <a href="" style="color: rgba(0, 217, 255, 0.776);text-decoration: none;">编辑</a>
                            </div>
                        </c:if>

                    </li>
                    <li class="list-group-item" style="padding-left:50px;padding-right:50px;">
                        <div style="display:inline-block;width: 300px;">
                            QQ号：
                        </div>
                        <div style="display:inline-block;">
                            <c:out value="${userInfoAll.qq}"/>
                        </div>
                        <c:if test="${userInfoAll.username eq sessionScope.isLoginUser.username}" var="sc1" scope="page">
                            <div style="float: right;">
                                <a href="" style="color: rgba(0, 217, 255, 0.776);text-decoration: none;">编辑</a>
                            </div>
                        </c:if>

                    </li>
                    <li class="list-group-item" style="padding-left:50px;padding-right:50px;">
                        <div style="display:inline-block;width: 300px;">
                            用户组：
                        </div>
                        <div style="display:inline-block;">
                            <c:out value="${userInfoAll.usergroup}"/>
                        </div>
                    </li>
                    <li class="list-group-item" style="padding-left:50px;padding-right:50px;">
                        <div style="display:inline-block;width: 300px;">
                            积分：
                        </div>
                        <div style="display:inline-block;">
                            <c:out value="${userInfoAll.score}"/>
                        </div>
                    </li>
                </c:if>
                <c:if test="${empty userInfoAll}">
                    <li class="list-group-item active" aria-current="true">|&nbsp;用户信息</li>
                    <li class="list-group-item" style="text-align: center">
                        <h1>未查询到该用户的信息！</h1>
                    </li>
                    <li class="list-group-item" style="text-align: center">
                        <h3>Error:User Information Not Fond.</h3>
                    </li>
                </c:if>
            </ul>
        </div>
        <div class="col-2 b3"></div>
    </div>
</div>



<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasRightLabel">头像上传</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">

        <form enctype="multipart/form-data" method="post" action="/upload">

            <div class="mb-3" style="text-align: center;">
                <img width=230px height=230px id="faceView" src="/userHeader/<c:out value="${userInfoAll.header_url}" default="default.jpg"/>" class="rounded-circle img-thumbnail">
                <div style="height: 50px;"></div>
                <!-- <input class="form-control" type="file" id="formFile" name="userHeader"> -->
                <section>
                    <div class="inputbox" style="width: 350px" >
                        <div>
                            <input type="file" class="form-control upload-img" name="myFile" id="formFile" accept="image/*" />
                        </div>
                    </div>
                    <div id="clipping-container"></div>
                    <!-- <img id="previewImg" src="" alt="" class="previewImg"> -->
                </section>
            </div>
            <div style="text-align: right;">
                <input type="button" class="btn btn-primary" type="button" id="uploadHeadButton" value="上传"/>
            </div>
        </form>



    </div>
</div>
<script src="/static/lib/crop-tool/croptool.min.js"></script>
<script src="/static/js/userHome.js"></script>
</body>
</html>
